<template>
    <fieldset>
        <legend>高级侦听器</legend>
        <button @click="handleStop">点击停止侦听</button>
    </fieldset>
</template>
<script setup>
import { ref, watchEffect } from "vuex"

let msg = ref('窗外')
let msg2 = ref('春天的故事')
setTimeout(() => {
    msg.value = "九九女儿红"

}, 2000)

// setTimeout(() => {
//     msg2.value = "涛声依旧"
// }, 3000)

//不需要指定特定的侦听的数据,只需要把侦听数据放到函数中使用,在数据变化的时候,侦听器会重新被触发
// let stop = watchEffect(() => {
//     console.log('高级侦听器----', msg.value);
//     console.log('高级侦听器----', msg2.value);
// })

//停止侦听，再次调用watchEffect的返回值
//正常情况下，组件卸载会自动停止侦听，但是也可以通过调用watchEffect的返回值来停止侦听
let handleStop = () => {
    //停止侦听
    stop()
    stop2()
}

//失效函数onInvalidate
//触发的情况: 1. watchEffect即将重新回调2. watchEffect停止侦听(组件卸载隐式停止侦听,显示主动停止侦听)
//顺序:1.打印'春天的故事' => '侦听器即将重新执行'=> '涛声依旧'
watchEffect((onInvalidate) => {
    console.log('onInvalidate概念----',msg2.value);
    onInvalidate(()=>{
        console.log("侦听器即将重新执行");
    })
})

setTimeout(() => {
    msg2.value = "水手"
}, 2000);
</script>